<template>
	<view class="wrap">
		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="修改信息" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>

		<form @submit="submit">
			<view class="top">

				<view class="item">
					<view class="left">会员昵称</view>
					<input type="text" placeholder-class="line" placeholder="请填写会员昵称" name="nickname"
						v-model="nickname" />
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<!-- fileList 显示已上传的文件列表 -->
					<!-- after 读取后的处理函数 -->
					<!-- delete 删除图片 传递index回调event参数 包含index,file,name-->
					<!-- name 标识符，可以在回调函数的第二项参数中获取 -->
					<!-- multiple 是否开启图片多选 部分安卓机型不支持 -->
					<!-- maxCount 最大选择图片的数量 -->
					<!-- :previewFullImage="true" 属性，达到文件预览的目的-->
					<u-upload :fileList="oldAvatarUrl" @afterRead="afterRead" @delete="deletePic" name="avatarurl"
						multiple :maxCount="1" :previewFullImage="true"></u-upload>
					<!-- 
					<u-upload ref="uUpload" name="avatarurl" :fileList="oldAvatarUrl" max-count="1" :action="action"
						upload-text="上传头像" :auto-upload="false" @on-success="uploadsuccess" @on-error="uploaderror"
						@on-choose-complete="chooseimg" :form-data="formData" :header="header"></u-upload> -->
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="radioGroupChange" active-color="orange">
							<u-radio v-for="(item, index) in sexlist" :key="index" :name="item.value">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @tap="showBirthdayPicker">
					<view class="left">会员生日</view>
					<!-- 	<input disabled type="text" placeholder-class="line" placeholder="2021-01-24" name="birthday"
						v-model="birthday" /> -->
					<picker mode="date" :show="birthdayShow" @change="getBirthday">{{birthday}}</picker>
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="region"
						v-model="region" />
				</view>
			</view>
			<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false"
				@confirm="onConfirm($event,'region')" ref="region"></regionPicker>
			<u-picker mode="time" ref="uPicker" v-model="birthdayShow" @confirm="birthdayConfirm" />
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				uploadUrl: '',
				isUptou: false,
				id: '', //初始化修改数据id
				// 头像提交服务端地址
				action: this.$URL + `/api/infoedit`,
				// 需要展示的图片列表比如展示需要编辑的用户头像
				oldAvatarUrl: [{
					url: "https://api.aslegou.top/uploads/tou.jpg"
				}],
				// 表单数据(不含头像信息)
				formData: {},
				// 初始化header头
				header: {},
				oldImg: '', //初始化旧图片
				regionVisible: false, //初始化地区选择器开关
				nickname: '鲁班', //初始化收件人姓名
				region: '北京市市辖区朝阳区', //初始化地区默认值
				birthday: '1992-02-14',
				birthdayShow: false,
				sexlist: [{
						value: 1,
						name: '男'
					},
					{
						value: 2,
						name: '女'
					},
				],
				sex: 1 //初始化会员性别
			}
		},

		onLoad() {
			this.getUserInfo(1)
		},

		methods: {
			// 修改头像
			afterRead(e) {
				console.log(e);
				this.oldAvatarUrl = [{
					url: e.file[0].url
				}]
				this.uploadUrl = e.file[0].url
				this.isUptou = true
			},
			// 删除头像图片
			deletePic(e) {
				console.log(e);
				this.oldAvatarUrl = []
			},
			// 修改生日信息
			getBirthday(e) {
				// console.log(e);
				this.birthday = e.detail.value
			},
			// 获取用户信息
			async getUserInfo(type) {
				let {
					token,
					uid
				} = uni.getStorageSync('userInfo')
				let options = {
					url: '/api/getuserinfo',
					data: {
						uid
					},
					header: {
						authorization: token
					}
				}
				let result = await this.$http(options)
				// console.log(result);
				if (result.data.code == 200) {
					// 判断是获取用户信息还是更新用户信息
					if (type == 2) { // 修改信息
						result.data.list[0].token = token
						result.data.list[0].birthday = this.birthday
						result.data.list[0].region = this.region
						// console.log(result.data.list[0]);
						// return
						uni.setStorageSync('userInfo', result.data.list[0]) // 更新本地缓存信息
						console.log(result.data.list[0]);
					} else if (type == 1) { // 获取用户信息
						let userInfo = result.data.list[0]
						console.log(userInfo);
						this.nickname = userInfo.nickname
						this.birthday = userInfo.birthday == null ? '2023-04-12' : userInfo.birthday
						this.id = userInfo.id
						this.sex = userInfo.sex
						this.region = userInfo.region
						this.oldAvatarUrl = [{
							url: this.$baseUrl + userInfo.avatarurl
						}]
						console.log(this.avatarurl);
						// let user = uni.getStorageSync('userInfo')
						// user.avatarurl = result.data.list[0].avatarurl
						// user.nickname = result.data.list[0].nickname
						// // console.log(user);
						// uni.setStorageSync('userInfo', user)
					}
				} else if (result.data.code == 403) {
					uni.showToast({
						title: '请重新登录',
						icon: 'error'
					})
				} else {
					uni.showToast({
						title: '网络故障!~~',
						icon: 'error'
					})
				}
			},
			// 保存用户信息
			async submit(e) {
				// console.log(e);
				// console.log(this.oldAvatarUrl);
				if (this.oldAvatarUrl.length == 0) {
					uni.showToast({
						title: '图片不能为空',
						icon: 'error'
					})
				}
				let {
					token
				} = uni.getStorageSync('userInfo')
				let {
					birthday,
					nickname,
					region
				} = e.detail.value
				// let id = this.id
				// let sex = this.sex
				let {
					id,
					sex
				} = this
				this.header = {
					authorization: token
				}
				this.formData = {
					id,
					sex,
					birthday,
					nickname,
					region
				}
				// console.log(this.formData); // 修改的信息

				if (this.isUptou) {
					// console.log('上传头像');
					uni.uploadFile({
						url: '/api/api/infoedit',
						filePath: this.oldAvatarUrl[0].url,
						name: 'avatarurl',
						formData: this.formData,
						header: {
							authorization: uni.getStorageSync('userInfo').token
						},
						success: (res) => {
							// console.log(res);
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							})
							this.getUserInfo(2)
							setTimeout(() => {

								uni.switchTab({
									url: '/pages/mine/mine'
								})
							}, 1500)
						}
					})
				} else {
					// console.log('没有上传头像');
					this.$http({
						url: '/api/infoedit',
						method: 'POST',
						data: this.formData
					}).then(res => {
						// console.log(res, 9999);
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
						this.getUserInfo(2)
						setTimeout(() => {

							uni.switchTab({
								url: '/pages/mine/mine'
							})
						}, 2000)
					})
				}

				// 当提交如果用户修改了头像 走upload提交 如果用户没有修改头像 走普通提交
				// let file = this.$refs.uUpload.lists[0].file || null
				// console.log(file);
				// this.getUserInfo(2)
				// if (file == null) { // 没有修改头像
				// 	let options = {
				// 		url: '/api/infoedit',
				// 		data: this.formData,
				// 		header: this.header,
				// 		method: 'POST'
				// 	}
				// 	let result = await this.$http(options)
				// 	if (result.data.code == 200) {
				// 		uni.showToast({
				// 			title: '信息修改成功',
				// 			icon: 'success'
				// 		})
				// 		this.getUserInfo(2)
				// 		setTimeout(() => {
				// 			uni.switchTab({
				// 				url: '/pages/mine/mine'
				// 			})
				// 		}, 1500)
				// 	}
				// }
			},
			// 选择会员地区
			onConfirm(res) {
				this.region = res.result
				// console.log(this.region);
			},
			// 监听本地选择图片
			chooseimg(lists, name) {},
			// 性别标签切换
			radioGroupChange(e) {},

			// 地址默认设置开关
			setDefault(e) {},

			// 开始生日选择器
			showBirthdayPicker() {
				this.birthdayShow = true;
			},
			// 监听时期选择器
			birthdayConfirm(e) {
				console.log(e);
				this.birthday = e.year + '-' + e.month + '-' + e.day
			},

			// 图片上传成功触发
			uploadsuccess(data, index, lists, name) {},
			// 图片上传失败触发
			uploaderror(res, index, lists, name) {},
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/userinfo.scss';
</style>